<template>
    <div class="file-box relative" ref="select_frame" @click="hideDropBox">
        <div class="file-box-header">
            <div style="height: 45px">
                <check-icon class="folder-icon fl" :fileData="currentFolderData"></check-icon>
                <div class="breadcrumb fl">
                    <breadcrumb v-model="breadcrumb" :callback="chooseBreadcrumb" :initFileData="breadInitName"
                                :windowWidth="windwoSize.width"></breadcrumb>
                    <!--<team-user-header class="fr" :userList="teamUsers" v-if="!currentFolderData.isHome"-->
                    <!--:addFun="showCollaboratorsList"></team-user-header>-->
                </div>
                <header-nav class="fr"></header-nav>
                <div style="clear: both"></div>
            </div>
            <p class="time" v-if="!currentFolderData.isHome"
               v-text="publicFun.rebuildTime(currentFolderData.updateTime,1)"></p>
        </div>
        <div class="edit-menu-box">
            <div class="top-button-box fl">
                <div class="single" v-show="chooseFileList.length === 0">
                    <button class="fl add-folder" @click="newFolder" v-show="pageType < 2 || currentFolderData.isHome">
                        <img src="@/assets/icon/add_folder_icon.png">
                        新建文件夹
                    </button>
                    <div class="upload-button fl" v-if="!currentFolderData.isHome || pageType === '1'">
                        <button class="fl button">
                            <i class="iconfont icon-download "></i>
                            上传
                        </button>
                        <input type="file" class="input-file" @change="chooseUploadFile">
                    </div>
                </div>
                <div class="many" v-show="chooseFileList.length > 0">
                    <button @click="downloadFile">下载</button>
                    <button @click="attentionMultiple">关注</button>
                    <button @click="showShareBox">分享</button>
                    <button v-show="pageType !== '2'" @click="showMoveModel('copy')">复制</button>
                    <button v-show="pageType !== '2'" @click="showMoveModel('move')">移动</button>
                    <button @click.stop="deleteFile">删除</button>
                </div>
            </div>
            <div class="list-operate-box fr">
                <!--<input v-model="searchTetx" class="search-box" @keydown.enter="websocketsend">-->
                <!--<button @click="websocketsend">搜索</button>-->
                <div class="sort-box fr">
                    <button class="sort-button">
                        <i style="line-height: 19px" class="fl iconfont icon-sort"></i>
                    </button>
                </div>
                <button class="fr change-list-type-button" @click="changeFileType()">
                    <i v-show="isShowIconList" style="line-height: 22px" class="iconfont icon-file"></i>
                    <i v-show="!isShowIconList" class="iconfont icon-list-file"></i>
                </button>
            </div>
        </div>

        <div class="file-list relative" ref="fileListBox" @dragenter="onDragenter"
             @drop="uploadCurrentPage" @dragover.prevent id="fileListBox">
            <right-menu :offset="rightMenuOffset" :show="rightMenuShow" @update:show="rightMenuShow = false">
                <ul class="right-menu-box" ref="rightMenuBox">
                    <li @click="showShareBox">
                        <img class="icon" src="@/assets/icon/share_icon.png">
                        <span>分享</span>
                    </li>
                    <li @click.stop="downloadFile">
                        <img class="icon" src="@/assets/icon/history/download_icon.png">
                        <span>下载</span>
                    </li>
                    <li @click.stop="showCollaboratorsList()" v-show="pageType !== '1'">
                        <img class="icon" src="@/assets/icon/check_member_icon.png">
                        <span>查看协作人员</span>
                    </li>
                    <li @click.stop="attentionMultiple">
                        <span class="not-have-icon">关注</span>
                    </li>
                    <li v-show="pageType !== '2'"  @click="showMoveModel('copy')">
                    <span class="not-have-icon">复制</span>
                    </li>
                    <li v-show="pageType !== '2'"  @click="showMoveModel('move')">
                    <span class="not-have-icon">移动</span>
                    </li>
                    <li @click.stop="resetName" v-if="chooseFileList.length <= 1">
                        <span class="not-have-icon">重命名</span>
                    </li>
                    <li @click.stop="deleteFile">
                        <span class="not-have-icon">删除</span>
                    </li>
                </ul>
            </right-menu>
            <loading v-show="pageLoading"></loading>
            <div v-show="currentFolderMask" class="drop-box"></div>
            <div v-show="showMouseSelectBox" class="selection-box" ref="selectionBox"></div>
            <div v-if="!isShowIconList && !isFileNull" class="list" ref="list">
                <table>
                    <thead>
                    <tr>
                        <td class="checkbox">
                            <check-box @clickBox="chooseAll" :status="true"
                                       :checked="isChooseAll">
                            </check-box>
                            <!--<input type="checkbox" v-model="isChooseAll" @click="chooseAll($event)"/>-->
                        </td>
                        <td class="file-name">名称</td>
                        <td class="history-file">版本</td>
                        <td class="file-uploder" v-show="pageType !== '1'">上传者</td>
                        <td class="file-size">大小</td>
                        <td class="file-update-time">修改时间</td>
                    </tr>
                    </thead>
                </table>
                <div class="table-content" ref="table-content" id="table-content"
                     @mousedown.left="mouseMoveSelect($event,'table-content','file-table-list')">
                    <table>
                        <tbody>
                        <tr v-for="(value,key) in fileList" :key="key" class="file-table-list relative"
                            @dragenter="onChildDrop($event,1,value)"
                            @drop="uploadChild($event,value)" @click.right="showRightMenu($event,value)"
                            @click.left="chooseFile(value)" :dataKey="value.fileId"
                            :class="checkChooseFileExit(value) ? 'table-choosed' : ''">
                            <td class="checkbox">
                                <check-box @clickBox="chooseFileChange($event,value)"
                                           :checked="chooseFileList.indexOf(value.fileId) > -1">
                                </check-box>
                                <!--<input type="checkbox" @click.stop="chooseFileChange($event,value)"-->
                                       <!--:checked="chooseFileList.indexOf(value.fileId) > -1"/>-->

                            </td>
                            <td class="file-name relative">
                                <div class="fl" @click.stop="fileClick(value)">
                                    <check-icon class="icon-box" :fileData="value"></check-icon>
                                </div>
                                <div class="fr" style=" width: calc(100% - 40px)">
                                    <div class="" style="width: 100%">
                                        <p @click.stop="fileClick(value)" class="file-name-text"
                                           v-if="!value.isResetName"
                                           v-text="value.name" :title="value.name"></p>
                                        <input class="file-name-text" style="margin: -3px 12px -3px 0px;"
                                               v-if="value.isResetName" v-model="editFileName" v-focus
                                               @blur="editFolderName(value)"
                                               @keyup.enter="inputBlur">
                                        <img :class="value.focus ? 'active-attention-icon' : 'attention-icon' " @click.stop="attentionFile(value)"
                                             v-show="pageType!=='3'"
                                             :src="value.focus ? '/icon/attention_icon.png' : '/icon/not_attention_icon.png'">
                                        <img :class="value.tags.length > 0 ? 'label-active-icon' : 'label-icon'" @click.stop="showTagModel(value)"
                                             src="@/assets/icon/label-icon.png">
                                        <div style="clear: both"></div>
                                    </div>
                                    <div v-if="value.tags && value.tags.length > 0" class="file-label-box">
                                        <ul>
                                            <li v-for="(tag,key) in value.tags" :key="key + 'tags'" v-text="tag"></li>
                                        </ul>
                                    </div>
                                    <p v-if="value.rote && value.rote.length > 5" class="from-folder">
                                        来自<span>"ios>担当企业文件>测试文件夹"</span>
                                    </p>
                                </div>
                            </td>
                            <td class="history-file">
                                <img v-if="value.fileType === 0" @click="showHistoryFileBox(value,key)"
                                     src="@/assets/icon/history_file_icon.png">
                                <div class="hover-box" :style="{width: pageType === '1' ? '260px' : '350px'}">
                                    <button class="other" @click="showRightMenu($event,value)">···</button>
                                    <button class="team" @ @click.stop="showCollaboratorsList(null,value)"
                                            v-show="pageType !== '1'">查看协作成员
                                    </button>
                                    <button class="share" @click="showShareBox">分享</button>
                                </div>
                            </td>
                            <td class="file-uploder" v-show="pageType !== '1'" v-text="value.user"></td>
                            <td class="file-size" v-text="publicFun.getFileSize(value.size)"></td>
                            <td class="file-update-time" v-text="publicFun.rebuildTime(value.updateTime,1)"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div v-if="isShowIconList && !isFileNull" class="icon-list relative" ref="icon-list" id="iconBox"
                 @mousedown.left="mouseMoveSelect($event,'icon-list','icon-list-li')"
                 @mousedown="cancelChoose($event,'iconBox')">
                <ul>
                    <li draggable="false" v-for="(value,key) in fileList" :key="key" :style="{margin:iconListLiMargin}"
                        @click="fileClick(value)" class="icon-list-li relative" :dataKey="value.fileId"
                        @click.right="showRightMenu($event,value)" :class="checkChooseFileExit(value) ? 'choosed' : ''">
                        <div class="drop-box" v-if="value.fileType === 1 && value.dropStatus"></div>
                        <check-file-icon :fileName="value.name" :dragenter="onChildDrop"
                                         :shiftClick="addChooseFile" class="file-icon" :fileData="value"
                                         :drop="uploadChild"></check-file-icon>
                        <p @click.shift="addChooseFile(value)" class="file-name"
                           v-if="!value.isResetName" v-text="value.name"></p>
                        <input class="reset-name-input text-center  " v-if="value.isResetName" v-model="editFileName"
                               v-focus @blur="editFolderName(value)" @keyup.enter="inputBlur">
                    </li>
                </ul>
            </div>
            <div class="file-null" v-if="isFileNull" align="center">
                <img class="file-null-icon" src="/icon/file_null.png">
                <p class="text-center">暂无文件/文件夹</p>
            </div>
        </div>
        <transition name="slide-fade">
            <personnel-right-menu v-if="collaboratorsList" @update:show="hideCollaboratorsList"
                                  :fileData="chooseFileData"></personnel-right-menu>
        </transition>
        <transition name="slide-fade">
            <upload-new-file v-if="historyFileBox" :fileData="chooseFileData" @update:fileData="setHistoryOver"
                             @update:show="hideHistoryBox" @uploadHistoryFile="uploadHistoryFile"
                             :historyFileChange="historyFileChange"
            ></upload-new-file>
        </transition>
        <edit-tab v-if="tagModel" :tagList="chooseFileData.tags" @closeModel="closeTagModel"
                  @change="fileTageChange"></edit-tab>
        <share v-if="showShare" :fileList="fileList" :chooseList="chooseFileList" :closeFun="closeShare"></share>
        <page-upload-list
                :list="uolpadListArr"
                @pageUploadList="pageUploadList"
                :stopUpload="stopUpload"
                :cencelUpload="cencelUpload"
                :restartUpload="restartUpload"
        ></page-upload-list>
        <move-file-model v-if="moveModel" :fileDatas="moveFileDatas" :type="moveType" @moveCencel="moveCencel"></move-file-model>

    </div>
</template>

<script>
  import HeaderNav from '@/components/HeaderNav'
  import PageUploadList from '@/components/FileList/PageUploadList'
  import Breadcrumb from '@/components/Breadcrumb.vue'
  import CheckFileIcon from '@/components/CheckFileIcon'
  import Loading from '@/components/Loading.vue'
  import RightMenu from '@/components/RightMenu.vue'
  // import TeamUserHeader from '@/components/TeamUserHeader.vue'
  import MoveFileModel from '@/components/FileList/MoveFileModel.vue'
  import PersonnelRightMenu from '@/components/FileList/PersonnelRightMenu.vue'
  import UploadNewFile from '@/components/FileList/UploadNewFile.vue'
  import EditTab from '@/components/FileList/EditTag.vue'
  import Share from '@/components/FileList/Share'
  import {md5} from '@/api/upload';
  import COS from 'cos-js-sdk-v5'


  export default {
    name: "index",
    components: {
      MoveFileModel,
      HeaderNav,
      PageUploadList,
      EditTab,
      Breadcrumb,
      CheckFileIcon,
      Loading,
      RightMenu,
      // TeamUserHeader,
      PersonnelRightMenu,
      UploadNewFile,
      Share
    },
    data() {
      return {
        moveType:'',
        moveFileDatas:[],
        moveModel:false,
        historyFileChange: 0,
        uolpadListArr: [],
        uploadFileStatus: 0,
        uploadList: {},
        cos: {},
        showShare: false,
        fileHoverId: '',
        chooseKey: 0,
        inviteUserModel: false,
        tagModel: false,
        historyFileBox: false,
        collaboratorsList: false,
        breadInitName: {},
        isFileNull: false,
        isChooseAll: false,
        dropSetTime: {},
        dropSetTimeChild: {},
        rightMenuShow: false,
        rightMenuOffset: {
          left: 0,
          top: 0
        },
        editFileName: '',
        pageLoading: false,
        currentFolderData: {isHome: true},
        currentFolderMask: false,
        chooseFolderMask: false,
        breadcrumb: [],
        windwoSize: {
          height: 700,
          width: 1100
        },
        chooseFileData: {},
        chooseFileList: [],
        selectBoxInfo: {},
        showMouseSelectBox: false,
        isShowIconList: false,
        dragover: false,
        pageType: 1,
        showListFile: true,
        iconListLiMargin: '10px 10px',
        fileList: [],
        searchTetx:''
      }
    },
    props: {
      companyId: {
        type: String,
        default: function () {
          return ''
        }
      }
    },
    mounted() {
      const that = this
      this.windwoSize = {
        height: document.body.scrollHeight,
        width: document.body.clientWidth
      }
      window.onresize = function () {
        that.windwoSize = {
          height: document.body.scrollHeight,
          width: document.body.clientWidth
        }
      }
      this.$refs.fileListBox.addEventListener("drop", function (e) {
        e.preventDefault();
        e.stopPropagation();
        // 处理拖拽文件的逻辑
      })
      this.cos = new COS({
        getAuthorization: function (options, callback) {  // 异步获取临时密钥
          that.$http.get('/pan/file/token/v1').then(function (data) {
            console.log(data)
            if (data.data.code === 1) {
              callback({
                TmpSecretId: data.data.data.credentials.tmpSecretId,        // 临时密钥的 tmpSecretId
                TmpSecretKey: data.data.data.credentials.tmpSecretKey,      // 临时密钥的 tmpSecretKey
                XCosSecurityToken: data.data.data.credentials.sessionToken, // 临时密钥的 sessionToken
                ExpiredTime: data.data.data.expiredTime,               // 临时密钥失效时间戳，是申请临时密钥时，时间戳加 durationSeconds
              });
            } else {
              throw 'get tencent upload key error'
            }
          })
        }
      });

      document.oncontextmenu = function () {
        return false;
      }
      this.checkPageType()
      const isShowIconList = localStorage.getItem('isShowIconList')
      if (isShowIconList && isShowIconList !== '') {
        this.isShowIconList = Boolean(isShowIconList)
      } else {
        this.isShowIconList = false
      }
      this.changeIconList()
    },
    watch: {
      currentFolderData: function () {
        console.log(this.currentFolderData)
      },
      uploadFileStatus: function () {
        const that = this
        this.uolpadListArr = []
        Object.keys(this.uploadList).forEach(function (key) {
          that.uolpadListArr.push(that.uploadList[key])
        })
      },

      '$route': function (to, from) {
        if (from.fullPath.indexOf('/cloudSpace/detail') > -1) {
          this.checkPageType()
        }
      },
      companyId: function () {
        if (this.$route.params.type === '0' && this.$route.query.deptId !== '0') {
          this.$router.push({path: '/cloudSpace/detail/0?deptId=0&name=企业文件'})
        } else {
          this.checkPageType()
        }
      }
    }, methods: {
      moveCencel:function(status){
        if(status){
          this.getFileListData(this.currentFolderData.fileId)
        }
        this.moveModel = false
      },

      showMoveModel:function(type){
        const that = this
        this.moveType = type
        this.moveModel = true
        this.rightMenuShow = false
        this.moveFileDatas = this.fileList.filter(function (value) {
          return that.chooseFileList.indexOf(value.fileId) > -1
        })
        let haveFolder = false
        this.moveFileDatas.forEach(function (file) {
          if(file.fileType === 1){
            haveFolder = true
          }
        })
        if(haveFolder){
          return this.$message({
            type:'warning',
            message: '暂时无法拷贝文件夹'
          })
        }
      },

      initWebSocket(){ //初始化weosocket
        const wsuri = 'ws://192.168.0.58:8768/pan/file/search';
        this.websock = new WebSocket(wsuri);
        console.log(wsuri)
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        // this.websocketsend(JSON.stringify(actions));
        console.log('建立连接')
        this.websocketsend()
      },
      websocketonerror(){//连接建立失败重连
        // this.initWebSocket();
      },
      websocketonmessage(e){ //数据接收
        const redata = JSON.parse(e.data);
        console.log(e)
        console.log(redata)
      },
      websocketsend(){//数据发送
        // let actions = {folder:this.currentFolderData.fileId,name:''};
        let actions = {folder:this.currentFolderData.fileId,name:this.searchTetx};
        this.websock.send(JSON.stringify(actions));
      },
      websocketclose(e){  //关闭
        console.log('断开连接',e);
      },

      pageUploadList: function () {
        const that = this
        this.uolpadListArr = []
        Object.keys(this.uploadList).forEach(function (key) {
          if (that.uploadList[key].status > 2) {
            delete that.uploadList[key]
          }
        })
        this.uploadFileStatus = this.uploadFileStatus + 1
      },
      stopUpload: function (fileData) {
        this.cos.pauseTask(fileData.taskId);
        this.uploadList[fileData.id].status = 0
        this.uploadFileStatus = this.uploadFileStatus + 1
      },
      cencelUpload: function (fileData) {
        this.cos.cancelTask(fileData.taskId);
        delete this.uploadList[fileData.id]
        this.uploadFileStatus = this.uploadFileStatus + 1
      },
      restartUpload: function (fileData) {
        this.cos.restartTask(fileData.taskId)
        this.uploadList[fileData.id].status = 1
        this.uploadFileStatus = this.uploadFileStatus + 1
      },

      closeShare: function () {
        this.showShare = false
      },
      showShareBox: function () {
        this.showShare = true
        this.rightMenuShow = false
      },
      setHistoryOver: function (fileData) {
        this.chooseFileData = fileData
        this.getFileListData(this.currentFolderData.fileId)

        // this.$set(this.fileList, this.chooseKey, fileData)
      },
      showTagModel: function (value) {
        this.chooseFileData = value
        this.tagModel = true
      },

      fileTageChange: function (tags) {
        const that = this
        this.eidtFileData({
          id: this.chooseFileData.fileId,
          tags: tags,
        }, function () {
          that.fileList.find(function (val) {
            return val.fileId === that.chooseFileData.fileId
          }).tags = tags
        })
      },
      closeTagModel: function () {
        console.log('---------------')
        this.tagModel = false
      },
      hideHistoryBox: function () {
        this.historyFileBox = false
      },

      uploadHistoryFile: function (fileDatas) {
        const that = this
        fileDatas.forEach(function (fileData) {
          that.uploadList[fileData.id] = fileData
          that.uploadFileStatus = that.uploadFileStatus + 1
          that.fileUploadCheck(fileData, fileData.file)
        })

      },
      showHistoryFileBox: function (fileData, key) {
        this.chooseFileData = fileData
        this.chooseKey = key
        this.historyFileBox = true
      },

      showCollaboratorsList: function (status, fileData) {
        if (status) {
          this.chooseFileData = this.currentFolderData
        }
        if (fileData) {
          this.chooseFileData = fileData
        }
        this.collaboratorsList = true
        this.hideRightMenu()
      },

      hideCollaboratorsList: function () {
        this.collaboratorsList = false
      },


      checkChooseAll: function () {
        if (this.chooseFileList.length !== 0 && this.chooseFileList.length === this.fileList.length) {
          this.isChooseAll = true
        } else {
          this.isChooseAll = false
        }
      },
      attentionFile: function (fileData) {
        const that = this
        this.pageLoading = true
        if (fileData.focus) {
          this.$http.delete('/pan/file/focus/v1/' + fileData.fileId).then(function (data) {
            that.pageLoading = false
            if (data.data.code === 1) {
              fileData.focus = false
              that.$message({
                type: 'success',
                message: '取消关注成功'
              })
            }
          }).catch(function () {
            that.pageLoading = false
          })
        } else {
          this.$http.put('/pan/file/focus/v1', {fileId: fileData.fileId}).then(function (data) {
            that.pageLoading = false
            if (data.data.code === 1) {
              fileData.focus = true
              that.$message({
                type: 'success',
                message: '关注成功'
              })
            }
          }).catch(function () {
            that.pageLoading = false
          })
        }
      },

      chooseAll: function (checked) {
        this.chooseFileList = []
        const that = this
        this.isChooseAll = checked
        if (checked) {
          this.fileList.forEach(function (fileData) {
            that.chooseFileList.push(fileData.fileId)
          })
        }
      },

      chooseFileChange: function (checked, fileData) {
        const index = this.chooseFileList.indexOf(fileData.fileId)
        if (checked) {
          if (index === -1) {
            this.chooseFileList.push(fileData.fileId)
            this.checkChooseAll()
          }
        } else {
          if (index !== -1) {
            this.chooseFileList.splice(index, 1)
            this.checkChooseAll()
          }
        }
      },
      addChooseFile: function (fileData) {
        this.chooseFileList.push(fileData.fileId)
      },
      checkPageType: function () {
        this.breadcrumb = []
        this.pageType = this.$route.params.type
        if (this.pageType === '0') {
          this.currentFolderData.name = this.$route.query.name
          this.breadInitName.name = this.currentFolderData.name
          this.getDeptFileId(this.$route.query.deptId)
        } else if (this.pageType === '1') {
          this.breadInitName.name = '个人文件'
          this.getPrivateFileList()
        } else if (this.pageType === '3') {
          this.breadInitName.name = '我的关注'
          this.getAttentionList()
        } else if (this.pageType === '2') {
          this.breadInitName.name = '与我协作'
          this.getCooperationList()
        }
        this.currentFolderData.isHome = true

        // else if (pageType === '2') {
        // }
      },

      getCooperationList: function () {
        const that = this
        this.pageLoading = true
        this.$http('/pan/file/cooperate/list/v1/1/1000').then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.fileList = that.fileSort(data.data.data)
            that.isChooseAll = false
            if (that.fileList.length === 0) {
              that.isFileNull = true
            } else {
              that.isFileNull = false
            }
          } else {
            that.$message({
              type: 'error',
              message: data.data.msg
            })
            that.fileList = []
            that.isFileNull = true
          }
        })
      },

      getAttentionList: function () {
        const that = this
        this.pageLoading = true
        this.$http('/pan/file/focus/list/v1/1/1000').then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.fileList = that.fileSort(data.data.data)
            that.isChooseAll = false
            if (that.fileList.length === 0) {
              that.isFileNull = true
            } else {
              that.isFileNull = false
            }
          } else {
            that.$message({
              type: 'error',
              message: data.data.msg
            })
            that.fileList = []
            that.isFileNull = true
          }
        })
      },
      mouseMoveSelect: function (event, fileBox, fileClassName) {
        const that = this
        this.cancelChoose(event, 'table-content')
        const boxPoint = {
          clientX: event.clientX,
          clientY: event.clientY,
          scrollTop: this.$refs[fileBox].scrollTop
        }
        let moveEndboxPoint = {}
        document.onmousemove = function (event) {
          if (Math.abs(event.clientX - boxPoint.clientX) > 2 && Math.abs(event.clientX - boxPoint.clientX)) {
            moveEndboxPoint.clientX = event.clientX
            moveEndboxPoint.clientY = event.clientY
            that.changeSelectBox(event, boxPoint)
            that.showMouseSelectBox = true
          }
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null
          that.selectBoxInfo = that.$refs.selectionBox.getBoundingClientRect();
          that.showMouseSelectBox = false
          if (that.$refs.selectionBox.clientWidth > 2 && that.$refs.selectionBox.clientHeight > 2) {
            that.boxChooseFile(boxPoint, fileClassName)
          }
        };
      },
      cancelChoose: function (event, id) {
        if (event.target.id === id) {
          this.chooseFileList = []
          this.checkChooseAll()
        }
      },
      changeIconList: function () {
        const listBoxWidth = this.$refs.fileListBox.clientWidth - 10
        const fileContent = Math.floor(listBoxWidth / 140)
        const moreMarginWidth = (listBoxWidth - fileContent * 110) / fileContent / 2
        this.iconListLiMargin = '10px ' + Math.floor(moreMarginWidth) + 'px'
      },
      inputBlur: function (event) {
        event.target.blur()
      },
      changeSelectBox: function (event, boxPoint) {  //确定框选初始位置及大小
        const offset = this.$config.boxSelectPositionOffset
        const domStyle = this.$refs.selectionBox.style
        if (event.clientX - boxPoint.clientX >= 0) {
          domStyle.left = (boxPoint.clientX - offset.down.x) + 'px'
          domStyle.right = null
        } else {
          domStyle.right = (this.windwoSize.width - boxPoint.clientX - offset.up.x) + 'px'
          domStyle.left = null
        }
        if (event.clientY - boxPoint.clientY >= 0) {
          domStyle.top = (boxPoint.clientY - offset.down.y) + 'px'
          domStyle.bottom = null
        } else {
          domStyle.bottom = (this.windwoSize.height - boxPoint.clientY - offset.up.y) + 'px'
          domStyle.top = null
        }
        domStyle.width = Math.abs(event.clientX - boxPoint.clientX) + 'px';
        domStyle.height = Math.abs(event.clientY - boxPoint.clientY) + 'px';
      },

      boxChooseFile: function (boxPoint, fileClassName) { //计算元素在框选范围之内
        let fileDivs = document.getElementsByClassName(fileClassName)
        this.chooseFileList = [];
        let boxLeft = this.selectBoxInfo.left
        let boxRight = this.selectBoxInfo.left + this.selectBoxInfo.width
        let boxTop = this.selectBoxInfo.top + boxPoint.scrollTop
        let boxBottom = this.selectBoxInfo.top + this.selectBoxInfo.height + boxPoint.scrollTop
        let boxOffsetY = fileClassName === 'file-table-list' ? 175 : 120
        for (let i = 0; i < fileDivs.length; i++) {
          let left = fileDivs[i].offsetLeft + 315
          let right = left + fileDivs[i].offsetWidth
          let top = fileDivs[i].offsetTop + boxOffsetY
          let bottom = top + fileDivs[i].offsetHeight
          let condition1 = right > boxLeft
          let condition2 = bottom > boxTop
          let condition3 = left < boxRight
          let condition4 = top < boxBottom
          if (condition1 && condition2 && condition3 && condition4) {
            this.chooseFileList.push(fileDivs[i].getAttribute('dataKey'))
          }
        }
        this.checkChooseAll()
      },


      checkChooseFileExit: function (fileData) {
        if (this.chooseFileList.indexOf(fileData.fileId) > -1) {
          return true
        } else if (this.fileHoverId === fileData.fileId) {
          return true
        } else {
          return false
        }
      },

      changeFileType: function () {
        if (this.isShowIconList) {
          this.isShowIconList = false
          localStorage.removeItem('isShowIconList')
        } else {
          this.isShowIconList = true
          localStorage.setItem('isShowIconList', this.isShowIconList)
        }
      },
      hideDropBox: function () {
        this.currentFolderMask = false
      },

      uploadCurrentPage: function (event) {
        if (this.pageType !== '1' && this.currentFolderData.isHome) {
          this.currentFolderMask = false
          this.$message({
            type: 'error',
            message: '禁止上传文件到当前目录'
          })
        }
        if (!this.currentFolderMask) {
          return event.preventDefault()
        }
        let fileDatas = {
          fileData: event.dataTransfer.files
        }
        fileDatas.parentId = this.currentFolderData.fileId
        this.uploadFile(fileDatas)
        this.currentFolderMask = false
      },

      webUploadCheck: function (file, id) {
        const that = this
        md5(file, function (hash) {
          that.checkFileNetExist(hash, function (checkData) {
            that.uploadList[id].hash = checkData.hash
            that.uploadList[id].tmpName = checkData.id
            if (checkData.exist) {
              that.uploadOver(that.uploadList[id], function (error, data) {
                if (error) {
                  return that.$message({
                    type: 'error',
                    message: error
                  })
                }
                if (data) {
                  that.uploadList[id].status = 4
                  that.uploadList[id].percent = 1
                  that.getFileListData(that.currentFolderData.fileId)
                  that.uploadingChange()
                }
              })
            } else {
              that.webUploadFile(file, id)
            }
            that.uploadingChange()
          })
        })
      },

      uploadingChange: function () {
        this.uploadFileStatus = this.uploadFileStatus + 1

      },

      uploadOver: function (fileData, callback) {
        const that = this
        let putData = {
          name: fileData.name,
          tmpName: fileData.tmpName,
          hash: fileData.hash
        }
        let putUrl = '/pan/file/v1'
        if (fileData.isHistory) {
          putUrl = '/pan/file/history/v1'
          putData.log = fileData.log
          putData.fileId = fileData.fileId
        } else {
          putData.parentId = fileData.parentId
        }
        this.$http.put(putUrl, putData).then(function (data) {
          if (data.data.code === 1) {
            if (fileData.isHistory) {
              that.historyFileChange = that.historyFileChange + 1
            }
            callback(null, data)
          } else {
            callback('网络错误,上传失败！')
          }
        }).catch(function (error) {
          callback(error)
        })
      },

      webUploadFile: function (file, id) {
        const that = this
        this.cos.sliceUploadFile({
          Bucket: that.$config.uploadBucket,
          Region: that.$config.tencentRegion,
          Key: that.uploadList[id].tmpName,
          Body: file,
          onTaskReady: function (taskId) {  //监听任务创建
            that.uploadList[id].taskId = taskId
            that.uploadList[id].status = 1
            that.uploadFileStatus = that.uploadFileStatus + 1
          },
          onProgress: function (progressData) {
            that.uploadList[id].percent = progressData.percent
            that.uploadList[id].speed = progressData.speed
            that.uploadList[id].loaded = progressData.loaded
            that.uploadList[id].total = progressData.total
            that.uploadFileStatus = that.uploadFileStatus + 1
          }
        }, function (err) {
          if (err) {
            console.log(err)
          } else {
            that.uploadOver(that.uploadList[id], function (error, data) {
              if (error) {
                return that.$message({
                  type: 'error',
                  message: error
                })
              }
              if (data) {
                that.uploadList[id].status = 3
                that.uploadFileStatus = that.uploadFileStatus + 1
                if (that.uploadList[id].isHistory) {
                  that.getFileListData(that.currentFolderData.fileId)
                } else {
                  that.getFileListData(that.currentFolderData.fileId)
                }
              }
            })
          }
        });
      },

      checkFileNetExist: function (md5, callback) {
        const url = '/pan/file/id/v1' + (md5 ? '/' + md5 : '')
        this.$http.get(url).then(function (data) {
          if (data.data.code === 1) {
            data.data.data.hash = md5
            callback(data.data.data)
          }
        }).catch(function (err) {
          throw err
        })
      },


      chooseUploadFile: function (event) {
        let fileDatas = {
          fileData: event.target.files
        }
        fileDatas.parentId = this.currentFolderData.fileId
        this.uploadFile(fileDatas)
      },

      chooseFile: function (fileData) {
        this.chooseFileList = []
        this.chooseFileData = fileData
        this.chooseFileList.push(fileData.fileId)
        this.checkChooseAll()
      },

      uploadChild: function (event, folderData) {
        if (this.fileHoverId === '') {
          return event.preventDefault()
        }
        let fileDatas = {
          fileData: event.dataTransfer.files
        }
        fileDatas.parentId = folderData.fileId
        this.uploadFile(fileDatas)
        this.$set(folderData, `dropStatus`, false)
        this.chooseFolderMask = false;
      },

      resetName: function () {
        let fileData = this.getChooseData()
        this.hideRightMenu()
        if (fileData.status === 0) {
          this.editFileName = fileData.data.name
          this.$set(this.chooseFileData, 'isResetName', true)
        }
      },
      downloadFile: function () {
        const that = this
        this.hideRightMenu()
        // let chooseFileDatas = this.fileList.filter(function (val) {
        //   return that.chooseFileList.indexOf(val.fileId) > -1 && val.fileType === 0
        // })
        let chooseFolderDatas = this.fileList.filter(function (val) {
          return that.chooseFileList.indexOf(val.fileId) > -1 && val.fileType === 1
        })
        console.log(chooseFolderDatas)
        if (chooseFolderDatas.length > 0) {
          this.$message({
            type: 'warning',
            message: '网页版无法下载文件夹'
          })
        } else {
          this.getDownloadLoadLink()
        }
        // const chooseFileId = chooseFileDatas.map(function (value) {
        //   return value.fileId
        // })
      },


      getDownloadLoadLink: function () {
        const that = this
        this.$http.post('/pan/file/download/url/v1', {
            fileId: this.chooseFileList
          }
        ).then(function (data) {
          console.log(data)
          if (data.data.code === 1) {
            that.webDownloadFile(data.data.data)
          }
        })
      },

      webDownloadFile: function (downloadData) {
        // const that = this
        downloadData.forEach(function (data, key) {
          // setTimeout(that.documentDownload(data),1)
          setTimeout(function () {
            window.location.href = data.uri
          }, key * 1000)
        })
      },

      documentDownload: function (data) {
        const iframe = document.createElement("iframe");
        iframe.style.display = "none"; // 防止影响页面
        iframe.style.height = 0; // 防止影响页面
        iframe.src = data.uri;
        document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
        // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
        setTimeout(() => {
          iframe.remove();
        }, 60000);
      },

      attentionMultiple: function () {
        this.rightMenuShow = false
        const that = this
        this.$http.post('/pan/file/focus/batch/v1', {
          fileId: this.chooseFileList
        }).then(function (data) {
          if (data.data.code === 1) {
            that.getFileListData(that.currentFolderData.fileId)
            that.$message({
              type: 'success',
              message: '关注成功'
            })
          }
        })
      },

      deleteFile: function () {
        this.hideRightMenu()
        let r = confirm("是否删除选中文件/文件夹")
        if (r == true) {
          this.postDelete()
        }
      },

      hideRightMenu: function () {
        this.rightMenuShow = false
      },

      postDelete: function () {
        const that = this
        this.pageLoading = true
        this.$http.post('/pan/file/files/v1', this.getDeleteArr()).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.fileList = that.fileList.filter(function (e) {
              return that.chooseFileList.indexOf(e.fileId) === -1
            })
          }
        })
      },

      getDeleteArr: function () {
        let deleteArr = []
        this.chooseFileList.forEach(function (fileId) {
          deleteArr.push({
            id: fileId,
            recycle: true,
          })
        })
        return deleteArr
      },

      getChooseData: function () {
        const that = this
        let status = 0, data;
        if (this.chooseFileList.length <= 1) {
          data = this.chooseFileData
        } else {
          status = 1
          data = this.fileList.filter(function (e) {
            return that.chooseFileList.indexOf(e.fileId) > -1
          })
        }
        return {
          status: status,
          data: data
        }
      },

      dropMouseLeave: function () {
        this.currentFolderMask = false
      },

      onDragenter(event) {
        if (event.target.id === 'table-content' || event.target.id === 'iconBox') {
          this.fileHoverId = ''
          this.currentFolderMask = true
        } else if (!this.chooseFolderMask) {
          this.fileHoverId = ''
          this.currentFolderMask = true
        }
      },
      newFolder: function () {
        if (!this.currentFolderData.fileId || this.currentFolderData.fileId === '') return
        this.fileList.unshift({
          id: this.$uuidv1(),
          name: '新建文件夹',
          fileType: 1,
          isResetName: true,
          isCreated: true
        })
        this.editFileName = '新建文件夹'
        this.isFileNull = false
      },

      editFolderName: function (fileData) {
        this.$set(fileData, 'isResetName', false)
        if (fileData.isCreated) {
          fileData.name = this.editFileName
          this.putNewFolder(fileData)
        } else if (this.editFileName !== fileData.name) {
          fileData.name = this.editFileName
          this.eidtFileData({
            id: fileData.fileId,
            name: fileData.name,
          }, function (data) {
            fileData = data
          })
        }
      },

      eidtFileData: function (data, callback) {
        const that = this
        this.$http.post('/pan/file/v1', data).then(function (data) {
          if (data.data.code === 1) {
            that.$message({
              type: 'success',
              message: '修改成功'
            })
            if (callback) {
              callback(data.data.data)
            }
          }
        })
      },

      putNewFolder: function (fileData) {
        if (fileData.name === '') {
          this.$message({
            type: 'error',
            message: '文件夹名称不能为空'
          })
          return this.deleteFolder(fileData)
        }
        const that = this
        this.pageLoading = true
        this.$http.put('/pan/file/folder/v1', {
          parentId: this.currentFolderData.fileId,
          folderName: fileData.name,
        }).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            for (let i = 0; i < that.fileList.length; i++) {
              if (that.fileList[i].id === fileData.id) {
                that.fileList[i].fileId = data.data.data.id
                that.fileList[i].fileType = 1
                that.fileList[i].name = data.data.data.name
                that.fileList[i].updateTime = data.data.data.updateTime
                break
              }
            }
          } else {
            that.deleteFolder(fileData)
            that.$message({
              type: 'error',
              message: data.data.msg
            })
          }
        }).catch(function (error) {
          console.log(error)
          that.pageLoading = false
          that.deleteFolder(fileData)
        })
      },

      deleteFolder: function (fileData) {
        for (let i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i].id === fileData.id) {
            this.fileList.splice(i, 1)
            break
          }
        }
      },

      fileClick: function (fileInfo) {
        if (!fileInfo.fileId || fileInfo.fileType === 0) return
        this.chooseFileList = []
        this.currentFolderData = fileInfo
        if (fileInfo.fileType === 1) {
          this.getFileListData(fileInfo.fileId)
          window.history.pushState(null, null, document.URL);
          this.breadcrumb.push(this.currentFolderData)
        }
      },

      chooseBreadcrumb: function (folderData) {
        if (!folderData) {
          return this.checkPageType()
        }
        this.currentFolderData = folderData
        console.log(this.currentFolderData)
        this.getFileListData(folderData.fileId)
      },

      uploadFile: function (filesData) {
        const that = this
        filesData.fileData.forEach(function (file) {
          const dataId = that.$uuidv1()
          let fileData = {
            id: dataId,
            parentId: filesData.parentId,
            path: file.path,
            name: file.name,
            size: file.size,
            type: file.type,
            lastModified: file.lastModified,
            time: new Date().getTime(),
            belong: that.$route.params.type,
            percent: 0,
            tmpName: dataId,
            file: file,
            status: 1
          }
          that.uploadList[dataId] = fileData
          that.uploadFileStatus = that.uploadFileStatus + 1
          that.fileUploadCheck(that.uploadList[dataId], file)
        })
      },

      fileUploadCheck: function (fileData, file) {
        const that = this
        if (fileData.size < 200 * 1024 * 1024) {
          that.webUploadCheck(file, fileData.id)
        } else {
          md5(file, function (hash) {
            that.checkFileNetExist(hash, function (checkData) {
              that.uploadList[fileData.id].hash = checkData.hash
              that.uploadList[fileData.id].tmpName = checkData.id
              if (checkData.exist) {
                that.uploadOver(that.uploadList[fileData.id], function (error, data) {
                  if (error) {
                    return that.$message({
                      type: 'error',
                      message: error
                    })
                  }
                  if (data) {
                    that.uploadList[fileData.id].status = 4
                    that.uploadList[fileData.id].percent = 1
                    that.getFileListData(that.currentFolderData.fileId)
                    that.uploadingChange()
                  }
                })
                that.cos.cancelTask(that.uploadList[fileData.id].taskId);
              }
              that.uploadingChange()
            })
          })
          that.webUploadCheck(file, fileData.id)
        }
      },

      showRightMenu: function (event, fileData) {
        this.chooseFileData = fileData
        if (this.chooseFileList.indexOf(String(fileData.fileId)) === -1) {
          this.chooseFileList = [fileData.fileId]
        }
        this.rightMenuOffset.left = Math.min(event.pageX, this.windwoSize.width - 150)
        this.rightMenuOffset.top = Math.min(event.pageY, this.windwoSize.height - 280)
        this.rightMenuShow = true
      },
      onChildDrop: function (event, status, folderData) {
        if (folderData.fileType === 0) {
          this.fileHoverId = ''
          this.currentFolderMask = true;
          this.chooseFolderMask = false;
          return event.preventDefault()
        }
        this.fileHoverId = folderData.fileId
        this.chooseFolderMask = true;
        this.currentFolderMask = false

      },

      fileSort: function (list) {
        return list.sort(function (a, b) {
          return b.fileType - a.fileType
        })
      },

      getPrivateFileList: function () {
        const that = this
        this.pageLoading = true
        this.$http.get('/pan/file/folder/personal/v2').then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.currentFolderData.fileId = data.data.data
            that.getFileListData(data.data.data)
          }
        })
      },

      getDeptFileId: function (deptId) {
        const that = this
        this.pageLoading = true
        this.$http.get('/pan/file/folder/dept/v2/' + deptId).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.currentFolderData.fileId = data.data.data
            that.getFileListData(data.data.data)
          }
        })
      },


      getFileListData: function (folderId) {
        const that = this
        this.pageLoading = true
        this.isFileNull = false
        this.$http.get('/pan/file/childFile/v1/' + folderId).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.chooseFileList = []
            that.fileList = that.fileSort(data.data.data)
            that.isChooseAll = false
            if (that.fileList.length === 0) {
              that.isFileNull = true
            } else {
              that.isFileNull = false
            }
          } else {
            that.$message({
              type: 'error',
              message: data.data.msg
            })
            that.fileList = []
            that.isFileNull = true
          }
        })
      }
    }
  }
</script>

<style scoped>
    .file-box {
        box-sizing: border-box;
        height: 100vh;
        width: 100%;
    }

    .file-box .file-box-header {
        height: 75px;
        border-bottom: #E0E1EA solid 1px;
    }

    .file-box .file-box-header .time {
        font-size: 12px;
        /*background:rgba(255,255,255,1);*/
        letter-spacing: 0.86px;
        padding-left: 81px;
        line-height: 17px;
        margin-top: 3px;
        color: #999999;
    }

    .file-box .file-box-header .folder-icon {
        height: 24px;
        width: 26px;
        margin-top: 21px;
        margin-left: 43px;
    }

    .breadcrumb {
        margin-top: 23px;
        margin-left: 18px;
        width: auto;
    }

    .list-operate-box {
        height: 50px;
        box-sizing: border-box;
    }

    .list-operate-box .change-list-type-button {
        background: white;
        border: none;
        margin-right: 10px;
    }

    .list-operate-box .sort-box {

    }

    .list-operate-box .sort-button {
        font-size: 14px;
        background: white;
        border: none;
        padding-right: 15px;
        padding-top: 3px;
        margin-right: 20px;
    }

    .list-operate-box .sort-button .sort:before {
        content: '';
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 7px solid #706d8c;
        position: absolute;
        right: 3px;
        top: 8px;
    }

    .file-box .edit-menu-box {
        margin-top: 14px;
    }

    .file-box .top-button-box {
        height: 30px;
        margin-left: 30px;
    }

    .file-box .top-button-box .many {

    }

    .file-box .top-button-box .many button {
        margin-right: 6px;
        width: 80px;
        height: 32px;
        border: 1px solid rgba(70, 144, 245, 1);
        border-radius: 2px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(70, 144, 245, 1);
    }

    .file-box .top-button-box .add-folder {
        background: #4690F5;
        color: white;
        height: 28px;
        width: 125px;
        border-radius: 3px;
        border: none;
        font-size: 14px;
        box-sizing: border-box;
    }

    .file-box .top-button-box .add-folder img {
        height: 15px;
        margin-top: -2px;
    }

    .file-box .top-button-box .upload-button {
        margin-left: 30px;
        position: relative;
        overflow: hidden;
        width: 82px;
        height: 28px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .top-button-box button i {
        font-size: 14px;
        color: #4690F5;
        letter-spacing: 1px;
    }

    .file-box .top-button-box .upload-button .button {
        width: 82px;
        height: 28px;
        color: #4690F5;
        background: white;
        cursor: pointer;
        border: 1px solid #4690F5;
        border-radius: 3px;
        font-size: 14px;
    }

    .file-box .top-button-box .upload-button input {
        width: 82px !important;
        height: 28px !important;
        position: absolute;
        z-index: 10;
        left: 0;
        top: 0;
        cursor: pointer;
        opacity: 0;
    }

    .file-null {
        width: 100%;
        height: calc(100vh - 160px);
    }

    .file-null p {
        font-size: 14px;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
    }

    .file-null-icon {
        margin-top: calc((100vh - 400px) / 2);
        height: 150px;
        width: 150px;
    }

    .file-list {
        width: 100%;
        overflow: hidden;
        moz-user-select: -moz-none;
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .file-list .icon-list {
        height: calc(100vh - 160px);
        overflow: auto;
        moz-user-select: -moz-none;
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .file-list .list {
        margin: 0 10px;
    }

    .selection-box {
        position: absolute;
        background: #8a8b90;
        opacity: 0.4;
        border: #242428 solid 1px;
        z-index: 10;
    }

    .drop-box {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #8a8b90;
        opacity: 0.3;
        border: #242428 solid 1px;
        z-index: 50;
        left: 0;
        top: 0;
        pointer-events: none;
        border-radius: 5px;
    }

    .file-list .icon-list ul {

    }

    .file-list .icon-list ul .icon-list-li {
        margin: 10px 10px;
        float: left;
        border-radius: 5px;
        padding: 5px;
        width: 110px;
        height: 100px;
        box-sizing: border-box;
    }

    .file-list .icon-list ul .choosed {
        background: #d6d7dc;
    }


    .file-list .icon-list ul li .file-icon {
        height: 60px;
        width: 60px;
        margin: 5px 20px 10px;
        display: inline-block;
    }

    .file-list .icon-list ul li .file-name {
        text-align: center;
        font-size: 12px;
        line-height: 15px;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-list .icon-list ul li .reset-name-input {
        width: 93px;
        font-size: 12px;
    }


    .file-list .table-content {
        height: calc(100vh - 180px);
        overflow: auto;
    }

    .file-list .table-content .table-choosed {
        background: #F2F5FC;
    }

    .file-list table {
        display: table;
        width: 100%;
        table-layout: fixed;
        word-wrap: break-word;
    }

    .file-list table thead tr {
        background: #f2f5fc;
        line-height: 35px;
        font-size: 14px;
        color: #F2F5FC;
        letter-spacing: 1px;

    }

    .file-list table tbody tr {
        font-size: 12px;
        color: #F2F5FC;
        letter-spacing: 0.86px;
        border-bottom: solid #dadadc 1px;
        cursor: pointer;
        position: relative;
        transform: scale(1);
    }

    .file-list table tbody tr:hover {
        background: #e5e7ee !important;
    }

    .file-list table tbody tr:hover .hover-box {
        background: #e5e7ee !important;
        display: block;

    }

    .file-list table tbody tr:hover .file-name .attention-icon {
        display: inline;
    }

    .file-list table tbody tr:hover .file-name .label-icon {
        display: inline;
    }

    .file-list table tbody tr:hover .file-label-box {
        display: block;
    }


    .file-list table tbody td {
        vertical-align: middle;
        padding: 10px 0
    }

    .file-list table tr .file-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-list table tr .file-name .attention-icon {
        height: 15px;
        width: 15px;
        display: none;
    }

    .file-list table tr .file-name .active-attention-icon{
        height: 15px;
        width: 15px;
        display: inline;
    }

    .file-list table tr .file-name .label-icon {
        height: 15px;
        width: 15px;
        margin-left: 8px;
        display: none;
    }

    .file-list table tr .file-name  .label-active-icon{
        height: 15px;
        width: 15px;
        margin-left: 8px;
        display: inline;
    }


    .file-list table tr .file-name .icon-box {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /*margin-top: calc((100% - 40px )/2);*/
    }

    .file-list table tr .file-name .file-icon {
        height: 25px;
        width: 25px;
        /*position: absolute;*/
    }

    .file-list table tr .file-name .from-folder {
        margin-top: 5px;
        font-size: 11px;
        line-height: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-list table tr .file-name .file-label-box {
        height: 18px;
        margin-top: 5px;
        overflow: hidden;
        text-overflow: clip;
        white-space: nowrap;
        max-width: 90%;
        /*display: none;*/
    }

    .file-list table tr .file-name .file-label-box li {
        background: #FFFFFF;
        border: 1px solid #D8D9E5;
        border-radius: 3px;
        min-width: 30px;
        text-align: center;
        padding: 0 5px;
        float: left;
        font-size: 11px;
        line-height: 15px;
        color: #666666;
        letter-spacing: 0.71px;
        margin-right: 5px;
    }

    .file-list table tr .file-name .file-name-text {
        float: left;
        max-width: calc(100% - 100px);
        margin-right: 10px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        font-size: 14px;
        color: #333333;
        line-height: 15px;
    }

    .file-list table tr .file-name .button-box {
        width: 140px;
        height: 40px;
        float: left;
        display: none;
    }

    .file-list table tr .checkbox {
        width: 40px;
    }

    .file-list table tr .checkbox input {
        margin: 0 10px;
        width: 20px;
    }


    .file-list table tr .file-uploder {
        width: 85px;
        text-align: left;
        color: #666666;
    }

    .file-list table tr .history-file {
        width: 60px;
        color: #666666;
    }

    .file-list table tr .hover-box {
        position: absolute;
        right: 0;
        top: 1px;
        bottom: -1px;
        width: 350px;
        background: #F2F5FC;
        vertical-align: middle;
        display: none;
    }

    .file-list table tr .hover-box button {
        background: #FFFFFF;
        border: 1px solid #D8D9E5;
        border-radius: 2px;
        height: 28px;
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
        /*position: absolute;*/
        float: right;
        margin-right: 30px;
        padding: 0 12px;
        top: 50%;
        transform: translateY(-50%);
    }

    /*.file-list table tr .hover-box .share {*/
    /*right: 189px;*/
    /*width: 62px;*/
    /*}*/

    /*.file-list table tr .hover-box .team {*/
    /*right: 82px;*/
    /*width: 96px;*/
    /*}*/

    /*.file-list table tr .hover-box .other {*/
    /*right: 34px;*/
    /*font-weight: bold;*/
    /*font-size: 16px;*/
    /*letter-spacing: 0;*/
    /*width: 38px;*/
    /*}*/

    .file-list table tr .history-file img {
        height: 20px;
    }

    .file-list table tr .file-update-time {
        width: 140px;
        text-align: left;
        color: #666666;
    }

    .file-list table tr .file-size {
        width: 95px;
        text-align: left;
        color: #666666;
    }

    .right-menu-box {
        background: white;
        padding: 5px 0;
        width: 150px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
    }

    .right-menu-box li {
        line-height: 40px;
        width: 150px;
        height: 40px;
        font-size: 12px;
        cursor: pointer;
    }

    .right-menu-box li .icon {
        height: 18px;
        margin-left: 17px;
        width: 18px;
    }

    .right-menu-box li span {
        margin-left: 19px;
    }

    .right-menu-box li .not-have-icon {
        margin-left: 54px !important;


    }

    .right-menu-box li:hover {
        background: rgba(247, 250, 252, 1);
    }

    .slide-fade-enter-active {
        transition: all .2s ease;
    }

    .slide-fade-leave-active {
        transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(100px);
        opacity: 0;
    }


</style>
